{% load i18n %}

<div class="card"> 
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#vnconsole" type="button" role="tab" aria-controls="vnconsole" aria-selected="true">
                    {% trans "Console" %}
                </button>
            </li>
            {% if app_settings.SHOW_ACCESS_ROOT_PASSWORD == 'True' %}
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#rootpasswd" type="button" role="tab" aria-controls="rootpasswd" aria-selected="false">
                        {% trans "Reset root Password" %}
                    </button>
                </li>
            {% endif %}
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#changeremarks" type="button" role="tab" aria-controls="changeremarks" aria-selected="false">
                    {% trans "Change Remarks" %}
                </button>
            </li>
            {% if app_settings.SHOW_ACCESS_SSH_KEYS == 'True' %}
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sshkeys" type="button" role="tab" aria-controls="sshkeys" aria-selected="false">
                        {% trans "SSH Keys" %}
                    </button>
                </li>
            {% endif %}
            {% if instance.status == 1 %}
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#vdiconsole" type="button" role="tab" aria-controls="vdiconsole" aria-selected="false">
                    {% trans "VDI" %}
                </button>
            </li>
            {% endif %}
        </ul>
    </div>
    <div class="card-body">
        <p class="text-muted">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="vnconsole">
                    <p>{% blocktrans with type=instance.console_type|upper %} This action opens a new window with a {{ type }} connection to the console of the instance.{% endblocktrans %}
                    </p>
                    {% if instance.console_type == 'vnc' %}
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="scale"
                                {% if app_settings.CONSOLE_SCALE == 'True' %} checked {% endif %}
                                id="scale">
                            <label class="form-check-label" for="scale">{% trans "Scale" %}</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="view_only"
                                {% if app_settings.CONSOLE_VIEW_ONLY == 'True' %} checked {% endif %}
                                id="view_only">
                            <label class="form-check-label" for="view_only">{% trans "View Only" %}</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="resize_session"
                                {% if app_settings.CONSOLE_RESIZE_SESSION == 'True' %} checked {% endif %}
                                id="resize_session">
                            <label class="form-check-label" for="resize_session">{% trans "Resize Session" %}</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="clip_viewport"
                                {% if app_settings.CONSOLE_CLIP_VIEWPORT == 'True' %} checked {% endif %}
                                id="clip_viewport">
                            <label class="form-check-label" for="clip_viewport">{% trans "View Clipboard" %}</label>
                        </div>
                    {% endif %}
                    {% if instance.status == 1 %}
                    <!-- Split button -->
                    <div class="float-end">
                        <a href="#" class="btn btn-facebook w-30" onclick="open_console('lite')">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M8 9l3 3l-3 3"></path>
                                <path d="M13 15l3 0"></path>
                                <path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
                            </svg>
                            {% trans "Console" %} 
                            {% comment %} - {% trans "Lite" %} {% endcomment %}
                        </a>
                        {% comment %} <a href="#" class="btn btn-vk w-30" onclick="open_console('full')">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M5 7l5 5l-5 5"></path>
                                <path d="M12 19l7 0"></path>
                            </svg>
                            {% trans "Console" %} - {% trans "Full" %}
                          </a> {% endcomment %}
                    </div>
                    {% else %}
                    <a href="#" class="btn btn-facebook w-30 float-end disabled" onclick="open_console('lite')">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M5 7l5 5l-5 5"></path>
                            <path d="M12 19l7 0"></path>
                        </svg>
                        {% trans "Console" %}
                    </a>
                    {% endif %}
                    <div class="clearfix"></div>
                </div>
                {% if app_settings.SHOW_ACCESS_ROOT_PASSWORD == 'True' %}
                <div role="tabpanel" class="tab-pane" id="rootpasswd">
                    <p>{% trans "You need shut down your instance and enter a new root password." %}</p>
                    <form action="{% url 'instances:rootpasswd' instance.id %}" method="post"
                        role="form" aria-label="Add root password to instance form">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-sm-4">
                                <input type="password" class="form-control" name="passwd"
                                    placeholder="{% trans "Enter Password" %}" maxlength="24" />
                            </div>
                        </div>
                        {% if instance.status == 5 %}
                        <input type="submit" class="btn btn-facebook w-30 float-end" name="rootpasswd"
                            value="{% trans "Reset Root Password" %}">
                        {% else %}
                        <button
                            class="btn btn-facebook w-30 float-end disabled">{% trans "Reset Root Password" %}</button>
                        {% endif %}
                    </form>
                    <div class="clearfix"></div>
                </div>
                {% endif %}
                <div role="tabpanel" class="tab-pane" id="changeremarks">
                    <form action="{% url 'instances:changeremarks' instance.id %}" method="post"
                        role="form" aria-label="The new Remarks">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-sm-12">
                                <textarea id='remarks' name='remarks' style="height:130px; width:100%; resize: none; " placeholder="{% trans "Remarks" %}">{{ instance.remarks }}</textarea>
                            </div>
                        </div>
                        {% if instance.status == 5 %}
                        <input type="submit" class="btn btn-facebook w-30 float-end" name="changeremarks"
                            value="{% trans "Change Remarks" %}">
                        {% else %}
                        <button
                            class="btn btn-facebook w-30 float-end disabled">{% trans "Change Remarks" %}</button>
                        {% endif %}
                    </form>
                    <div class="clearfix"></div>
                </div>
                {% if app_settings.SHOW_ACCESS_SSH_KEYS == 'True' %}
                <div role="tabpanel" class="tab-pane" id="sshkeys">
                    <p>{% trans "You need shut down your instance and choose your public key." %}</p>
                    <form action="{% url 'instances:add_public_key' instance.id %}"method="post"
                        role="form" aria-label="Add public key to instance form">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-sm-12">
                                <select name="sshkeyid" class="form-control-lg keyselect">
                                    {% if publickeys %}
                                    {% for key in publickeys %}
                                    <option value="{{ key.id }}">{{ key.keyname }}</option>
                                    {% endfor %}
                                    {% else %}
                                    <option value="None">{% trans "None" %}</option>
                                    {% endif %}
                                </select>
                            </div>
                        </div>
                        {% if instance.status == 5 %}
                        <input type="submit" class="btn btn-lg btn-success float-end" name="addpublickey"
                            value="{% trans "Add Public Key" %}">
                        {% else %}
                        <button class="btn btn-lg btn-success float-end disabled">{% trans "Add Public Key" %}</button>
                        {% endif %}
                    </form>
                    <div class="clearfix"></div>
                </div>
                {% endif %}
                {% if instance.status == 1 %}
                <div role="tabpanel" class="tab-pane" id="vdiconsole">
                    <p>{% trans "This action opens a remote viewer with a connection to the console of the instance." %}</p>
                    <div class="input-group">
                        <input type="text" class="form-control" disabled id="vdi_url_input">
                        <a href="#" class="btn" id="vdi_url">{% trans "VDI" %}</a>
                    </div>
                    <p>{% trans "To download console.vv file for virt-viewer." %}</p>
                    <a href="{% url 'instances:getvvfile' instance.id %}" class="btn btn-tabler w-30 float-end">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
                            <path d="M7 11l5 5l5 -5"></path>
                            <path d="M12 4l0 12"></path>
                         </svg>
                        {% trans "Get console.vv" %}
                      </a>
                </div>
                {% endif %}
            </div>
        </p>
    </div>
</div>
{% block script %}
<script>
    function open_console(view_style) {
        const sc = $("#scale").is(':checked');
        const vo = $("#view_only").is(':checked');
        const rs = $("#resize_session").is(':checked');
        const cv = $("#clip_viewport").is(':checked');
        url = '{% url 'console' %}?token={{ compute.id }}-{{ instance.get_uuid }}&view=' + view_style + '' + '&view_only=' + vo + '' + '&scale=' + sc + '' + '&clip_viewport=' + cv + '' + '&resize_session=' + rs + '';
        window.open(url)
    }
</script>
{% endblock %}